<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试会员功能</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }
        .membership-card {
            border: 1px solid #ddd;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
        }
        button {
            padding: 10px 20px;
            background: #FFD700;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>测试会员按钮功能</h1>
    
    <div class="membership-card">
        <h3>基础会员</h3>
        <p>价格：¥19/月</p>
        <button>立即开通</button>
    </div>
    
    <div class="membership-card">
        <h3>高级会员</h3>
        <p>价格：¥39/月</p>
        <button>立即开通</button>
    </div>
    
    <div class="membership-card">
        <h3>大师会员</h3>
        <p>价格：¥69/月</p>
        <button>立即开通</button>
    </div>
    
    <div style="margin-top: 30px;">
        <h3>付费内容预览</h3>
        <p>这是付费内容预览，需要升级会员才能查看完整内容。</p>
        <button>升级会员</button>
    </div>
    
    <script>
        // 简化版会员按钮处理 - 直接在页面底部执行
        (function() {
            // 添加调试信息
            console.log('会员按钮脚本初始化...');
            
            // 创建一个全局函数用于打开支付模态框
            window.openMembershipPayment = function(membershipType = '高级会员') {
                console.log('全局函数调用，会员类型:', membershipType);
                showPaymentModal(membershipType);
            };
            
            // 立即执行按钮绑定
            bindMembershipButtons();
            
            // 同时添加延迟绑定作为备份
            setTimeout(bindMembershipButtons, 1000);
            
            function bindMembershipButtons() {
                console.log('尝试绑定会员按钮...');
                const buttons = document.getElementsByTagName('button');
                let foundButtons = 0;
                
                for (let i = 0; i < buttons.length; i++) {
                    const btn = buttons[i];
                    const txt = (btn.textContent || btn.innerText || '').toLowerCase();
                    
                    if (txt.includes('立即开通') || txt.includes('升级会员')) {
                        foundButtons++;
                        console.log('找到会员按钮:', txt, '索引:', i);
                        
                        // 移除旧的事件监听器（如果有）
                        const newBtn = btn.cloneNode(true);
                        btn.parentNode.replaceChild(newBtn, btn);
                        
                        // 添加新的点击事件
                        newBtn.onclick = function(event) {
                            console.log('会员按钮被点击:', txt);
                            // 阻止默认行为
                            if (event) {
                                event.preventDefault();
                                event.stopPropagation();
                            }
                            
                            // 获取会员类型
                            let memberType = '高级会员';
                            let parent = this;
                            
                            // 尝试多种方式获取会员类型
                            for (let j = 0; j < 5; j++) { // 最多向上查找5层
                                parent = parent.parentNode;
                                if (!parent) break;
                                
                                // 查找包含会员信息的元素
                                const h3 = parent.querySelector('h3');
                                if (h3) {
                                    memberType = h3.textContent;
                                    console.log('找到会员类型:', memberType);
                                    break;
                                }
                                
                                // 检查是否包含价格信息来推断会员等级
                                if (parent.textContent && parent.textContent.includes('¥19')) {
                                    memberType = '基础会员';
                                    console.log('通过价格推断会员类型: 基础会员');
                                    break;
                                } else if (parent.textContent && parent.textContent.includes('¥69')) {
                                    memberType = '大师会员';
                                    console.log('通过价格推断会员类型: 大师会员');
                                    break;
                                }
                            }
                            
                            // 显示支付模态框
                            showPaymentModal(memberType);
                            return false;
                        };
                        
                        // 添加视觉反馈
                        newBtn.style.cursor = 'pointer';
                        newBtn.style.transition = 'transform 0.2s';
                        newBtn.onmouseover = function() {
                            this.style.transform = 'scale(1.05)';
                        };
                        newBtn.onmouseout = function() {
                            this.style.transform = 'scale(1)';
                        };
                    }
                }
                
                console.log('会员按钮绑定完成，找到', foundButtons, '个按钮');
                
                // 如果没找到按钮，尝试另一种方式
                if (foundButtons === 0) {
                    console.log('尝试使用替代选择器...');
                    
                    // 直接为付费相关的容器添加点击事件
                    const premiumSections = document.querySelectorAll('#premium, [id*="premium"], [class*="premium"]');
                    premiumSections.forEach(section => {
                        section.style.cursor = 'pointer';
                        section.onclick = function(e) {
                            // 只有当点击的不是内部链接或按钮时才触发
                            if (!e.target.closest('a') && !e.target.closest('button')) {
                                console.log('点击了会员区域，打开默认支付界面');
                                showPaymentModal('高级会员');
                            }
                        };
                    });
                }
            }
        })();
        
        // 简单的支付模态框函数
        function showPaymentModal(membershipType) {
            console.log('显示支付模态框，会员类型:', membershipType);
            
            // 先移除已存在的模态框（如果有）
            const existingModal = document.getElementById('simple-payment-modal');
            if (existingModal) {
                existingModal.remove();
            }
            
            // 创建模态框容器
            const modal = document.createElement('div');
            modal.id = 'simple-payment-modal';
            modal.style.position = 'fixed';
            modal.style.top = '0';
            modal.style.left = '0';
            modal.style.width = '100%';
            modal.style.height = '100%';
            modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
            modal.style.zIndex = '9999';
            modal.style.display = 'flex';
            modal.style.justifyContent = 'center';
            modal.style.alignItems = 'center';
            modal.style.padding = '20px';
            modal.style.boxSizing = 'border-box';
            
            // 创建模态框内容
            const content = document.createElement('div');
            content.style.backgroundColor = 'white';
            content.style.borderRadius = '15px';
            content.style.padding = '30px';
            content.style.maxWidth = '500px';
            content.style.width = '100%';
            content.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.2)';
            content.style.position = 'relative';
            
            // 模态框HTML内容
            content.innerHTML = `
                <div style="text-align: center;">
                    <h2 style="color: #333; margin-bottom: 25px; font-size: 24px;">开通 ${membershipType}</h2>
                    
                    <!-- 支付方式 -->
                    <div style="margin-bottom: 25px;">
                        <h3 style="text-align: left; margin-bottom: 15px; color: #555;">选择支付方式</h3>
                        <div style="display: flex; gap: 10px;">
                            <button class="pay-option" style="flex: 1; padding: 15px; background: #FFD700; color: #333; border: none; border-radius: 8px; font-weight: bold; cursor: pointer;">微信支付</button>
                            <button class="pay-option" style="flex: 1; padding: 15px; background: #f5f5f5; color: #333; border: none; border-radius: 8px; font-weight: bold; cursor: pointer;">支付宝</button>
                            <button class="pay-option" style="flex: 1; padding: 15px; background: #f5f5f5; color: #333; border: none; border-radius: 8px; font-weight: bold; cursor: pointer;">银行卡</button>
                        </div>
                    </div>
                    
                    <!-- 套餐选择 -->
                    <div style="margin-bottom: 25px;">
                        <h3 style="text-align: left; margin-bottom: 15px; color: #555;">选择套餐</h3>
                        <div style="display: flex; flex-direction: column; gap: 12px;">
                            <label style="display: flex; align-items: center; padding: 15px; background: #f5f5f5; border-radius: 8px; cursor: pointer;">
                                <input type="radio" name="plan" value="monthly" checked style="margin-right: 10px;" /> 月付 - ${membershipType.includes('基础') ? '¥19' : membershipType.includes('高级') ? '¥39' : '¥69'}/月
                            </label>
                            <label style="display: flex; align-items: center; padding: 15px; background: #f5f5f5; border-radius: 8px; cursor: pointer;">
                                <input type="radio" name="plan" value="quarterly" style="margin-right: 10px;" /> 季付 - 省15% - ¥${membershipType.includes('基础') ? '48' : membershipType.includes('高级') ? '99' : '175'}/季度
                            </label>
                            <label style="display: flex; align-items: center; padding: 15px; background: #f5f5f5; border-radius: 8px; cursor: pointer;">
                                <input type="radio" name="plan" value="yearly" style="margin-right: 10px;" /> 年付 - 省30% - ¥${membershipType.includes('基础') ? '156' : membershipType.includes('高级') ? '328' : '570'}/年
                            </label>
                        </div>
                    </div>
                    
                    <!-- 支付按钮 -->
                    <button id="pay-now-btn" style="width: 100%; padding: 18px; background: #FFD700; color: #333; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer;">确认支付</button>
                </div>
                <!-- 关闭按钮 -->
                <button id="close-modal-btn" style="position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 24px; color: #999; cursor: pointer;">×</button>
            `;
            
            // 添加到页面
            modal.appendChild(content);
            document.body.appendChild(modal);
            
            // 支付方式选择
            const payOptions = document.querySelectorAll('.pay-option');
            payOptions.forEach(option => {
                option.onclick = function() {
                    payOptions.forEach(opt => opt.style.backgroundColor = '#f5f5f5');
                    this.style.backgroundColor = '#FFD700';
                };
            });
            
            // 关闭按钮
            document.getElementById('close-modal-btn').onclick = function() {
                document.body.removeChild(modal);
            };
            
            // 确认支付
            document.getElementById('pay-now-btn').onclick = function() {
                document.body.removeChild(modal);
                showMembershipPage(membershipType);
            };
            
            // 点击模态框外部关闭
            modal.onclick = function(e) {
                if (e.target === modal) {
                    document.body.removeChild(modal);
                }
            };
            
            console.log('支付模态框已显示');
        }
        
        // 会员页面函数
        function showMembershipPage(membershipType) {
            console.log('显示会员页面，类型:', membershipType);
            
            // 创建会员页面
            const memberPage = document.createElement('div');
            memberPage.style.position = 'fixed';
            memberPage.style.top = '0';
            memberPage.style.left = '0';
            memberPage.style.width = '100%';
            memberPage.style.height = '100%';
            memberPage.style.backgroundColor = 'white';
            memberPage.style.zIndex = '10000';
            memberPage.style.overflowY = 'auto';
            memberPage.style.padding = '20px';
            memberPage.style.boxSizing = 'border-box';
            
            // 会员页面内容
            memberPage.innerHTML = `
                <div style="max-width: 1200px; margin: 0 auto;">
                    <!-- 头部 -->
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;">
                        <button id="exit-member-btn" style="background: none; border: none; font-size: 18px; font-weight: bold; color: #8B4513; cursor: pointer;">
                            &larr; 返回网站
                        </button>
                        <div style="display: flex; align-items: center;">
                            <div style="margin-right: 15px;">
                                <div style="font-size: 14px; color: #666;">尊贵的${membershipType}</div>
                                <div style="font-weight: bold;">金铲铲玩家</div>
                            </div>
                            <div style="width: 50px; height: 50px; background: #FFD700; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 24px; color: #333;">
                                <i class="fa fa-crown"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 会员卡片 -->
                    <div style="background: linear-gradient(90deg, rgba(255,215,0,0.2), rgba(139,69,19,0.2)); border-radius: 12px; padding: 25px; margin-bottom: 30px;">
                        <h2 style="color: #333; margin-bottom: 15px;">会员权益</h2>
                        <div style="display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px;">
                            <div style="flex: 1; min-width: 200px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
                                <h3 style="color: #FFD700; margin-bottom: 10px;">🎯 独家阵容</h3>
                                <p style="color: #666;">获取最新T0阵容搭配和运营思路</p>
                            </div>
                            <div style="flex: 1; min-width: 200px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
                                <h3 style="color: #FFD700; margin-bottom: 10px;">📊 全赛季数据</h3>
                                <p style="color: #666;">访问S1-S15所有赛季的英雄和装备登顶率</p>
                            </div>
                            <div style="flex: 1; min-width: 200px; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
                                <h3 style="color: #FFD700; margin-bottom: 10px;">🎓 视频教程</h3>
                                <p style="color: #666;">观看职业选手的进阶操作教学</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 赛季数据访问 -->
                    <div style="background: #f9f9f9; border-radius: 12px; padding: 25px; margin-bottom: 30px;">
                        <h3 style="color: #333; margin-bottom: 20px;">赛季数据访问</h3>
                        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 10px;">
                            ${Array.from({length: 15}, (_, i) => `
                                <!-- 赛季按钮已移除 -->              S${i+1}
                                </button>
                            `).join('')}
                        </div>
                    </div>
                </div>
            `;
            
            // 添加到页面
            document.body.appendChild(memberPage);
            
            // 退出按钮
            document.getElementById('exit-member-btn').onclick = function() {
                document.body.removeChild(memberPage);
            };
            
            // 赛季按钮
            // 赛季功能已移除
                btn.onclick = function() {
                    alert(`已加载${this.textContent}赛季的完整数据统计！`);
                };
            });
            
            console.log('会员页面已显示');
        }
    </script>
</body>
</html>